<script setup>
import Ask from '~/contentScripts/views/tao/detail/components/analysis/ask.vue'
import Comment from '~/contentScripts/views/tao/detail/components/analysis/comment.vue'
import Like from '~/contentScripts/views/tao/detail/components/analysis/like.vue'
// import LikeShop from '~/contentScripts/views/tao/detail/components/analysis/likeShop.vue'
// import Shop from '~/contentScripts/views/tao/detail/components/analysis/shop.vue'
import MobileDetail from "~/contentScripts/views/tao/detail/components/tool/mobileDetail.vue";
import MainImageAnalysis from '~/contentScripts/views/tao/list/components/mainImageAnalysis.vue'
import MarketAnalysis from "~/contentScripts/views/tao/list/components/marketAnalysis.vue";
import TbHotModal from "~/contentScripts/views/tao/list/components/TbHotModal.vue";

const loginVisible = ref(false)

const handle = () => {
  window.open('https://files.alicdn.com/tpsservice/1567444f68c85582535edb2225a43107.xlsx');
}
</script>

<template>
  <a-col flex="1">
    <a-row type="flex" :gutter="5">
      <a-col>
        <div class="bold inner-box" style="background: #1890ff;color: #fff;font-size: 12px;">
          分析工具
        </div>
      </a-col>
      <a-col style="margin-right: 28px;">
        <a-row type="flex" :gutter="10">
          <a-col style="width: max-content;">
            <Comment @login="loginVisible = true"/>
          </a-col>
          <a-col style="width: max-content;">
            <Ask @login="loginVisible = true"/>
          </a-col>
<!--          <a-col flex="1">-->
<!--            <Like @login="loginVisible = true"/>-->
<!--          </a-col>-->
          <!-- <a-col flex="1">
            <Shop @login="loginVisible = true"/>
          </a-col> -->
          <!-- <a-col flex="1">
            <LikeShop @login="loginVisible = true"/>
          </a-col> -->
          <a-col style="width: max-content; margin-right: 18px;">
            <MainImageAnalysis @login="loginVisible = true">
              <div class="bold inner-box btn" style="width: 100%">
                主图分析
              </div>
            </MainImageAnalysis>
          </a-col>
          <a-col style="width: max-content;">
            <MarketAnalysis @login="loginVisible = true">
              <div class="bold inner-box btn" style="width: 100%">
                市场分析
              </div>
            </MarketAnalysis>
          </a-col>
        </a-row>
      </a-col>

      <a-col>
        <div class="inner-box blue" style="background: rgb(24, 144, 255); color: rgb(255, 255, 255); font-size: 12px;cursor: pointer;">
          其他工具
        </div>
      </a-col>
      <a-col style="width: max-content;">
        <MobileDetail />
      </a-col>
      <a-col style="width: max-content;">
        <div 
          class="bold inner-box btn bold" 
          @click="handle"
          >
          20万关键字
        </div>
      </a-col>
    </a-row>
  </a-col>

  <user-login-modal :login-visible="loginVisible" @close="loginVisible = false"/>
</template>

<style scoped>

</style>
